<template>
	<div id='HYYHchart' style="width: 500px;height:280px;margin:0 auto;"></div>
</template>

<script>
import * as echarts from 'echarts'
import {GETACTIVEUSER} from '@/../static/js/apis.js'

export default{
	name: "HYYHchart",
	data () {
	  	return {
	     		datax:[],
	     		data:[]
	  	}
      },
	methods: {
		//绘制图形
		drawChart () {
			let myChart = echarts.init(document.getElementById('HYYHchart'))
			let options= {
			    title: {
			        text: '活跃用户'
			    },
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            label: {
			                backgroundColor: '#6a7985'
			            }
			        }
			    },
			    color:['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],
			    legend: {
			        data: ['时', '七天', '十五天', '月'],
			        selectedMode: 'single'
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: [
			        {
			            type: 'category',
			            boundaryGap: false,
			            data: this.datax
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
                  minInterval:1
			        }
			    ],
			    series: [
			        {
			            name: '时',
			            type: 'line',
			            stack: '总量',
			            data: this.data
			        },
			        {
			            name: '七天',
			            type: 'line',
			            stack: '总量',
			            data: this.data
			        },
			        {
			            name: '十五天',
			            type: 'line',
			            stack: '总量',
			            data: this.data
			        },
			        {
			            name: '月',
			            type: 'line',
			            stack: '总量',
			            data: this.data
			        }
			    ]
			};
			myChart.on('legendselectchanged', (e) => {
			  if(e.name=='时'){
			  	this.getData(1,'时')
			  }else if(e.name=='七天'){
			  	this.getData(7,'七天')
			  }else if(e.name=='十五天'){
			  	this.getData(15,'十五天')
			  }else if(e.name=='月'){
			  	this.getData(30,'月')
			  }
			  myChart.setOption({
				        xAxis: [{
				            data: this.datax
				        }]
			   });
			});
			myChart.setOption(options, true)
		},
		getData (type,name) {
			const self = this;
               let myChart = echarts.init(document.getElementById('HYYHchart'))
			 GETACTIVEUSER(type, function (res) {
			 	if(res.data){
			 	    self.datax=[];
			         self.data=[];
		        		res.data.forEach(function(item, index) {
                                   self.datax.push(item.ldate)
                                   self.data.push(item.total)
				      })
		        		 myChart.setOption({
		        		   xAxis: [
					        {
					            type: 'category',
					            boundaryGap: false,
					            data: self.datax
					        }
					    ],
				        series: [
				            {
					            name: name,
					            type: 'line',
					            stack: '总量',
					            data:  self.data
					        }
				        ]
			         });
				}
		        })
	     },
	     getStatic(){
	     	     const self = this;
			 GETACTIVEUSER(1, function (res) {
			 	if(res.data){
		        		res.data.forEach(function(item, index) {
                                   self.datax.push(item.ldate)
                                   self.data.push(item.total)

				      })
		        		  self.drawChart()
				}

		        })
	     }
     },
	mounted () {
		this.getStatic()

	}
}

</script>

<style scoped>

</style>
